<template>
  <div class="fillContent" style="height:100%;">

    <!-- <el-tabs v-model="activeName" @tab-click="handleClick" centered stretch > -->
    <el-tabs v-model="activeName" centered stretch @tab-click="show()" style="width: 100%;height: 100%;">
      <el-tab-pane label="基本信息" name="first" style="width: 100%;height: 100%; ">
        <basicInformation :jsonData="getDataFromDom"  :imageData="AllImageData">
        </basicInformation>
      </el-tab-pane>
      <el-tab-pane label="园区外围中压管网" name="second" :lazy="true" style="width: 100%;height: 100%; ">
        <outMidPressureNet :jsonData="getDataFromDom" :imageData="AllImageData" :projectInfo="projectInfo">
        </outMidPressureNet>
        <!-- <div style="width: 100px;height: 100px;background-color: red;"></div> -->
      </el-tab-pane>
      <el-tab-pane label="燃气主控阀" name="third" :lazy="true" style="width: 100%;height: 100%; ">
        <energyMainControllValue :jsonData="getDataFromDom" :imageData="AllImageData" :projectInfo="projectInfo">
        </energyMainControllValue>
      </el-tab-pane>
      <el-tab-pane label="园区内中压管网" name="fourth" :lazy="true" style="width: 100%;height: 100%; ">
        <inMidNet :jsonData="getDataFromDom" :imageData="AllImageData" :projectInfo="projectInfo"></inMidNet>
      </el-tab-pane>
      <el-tab-pane label="调压设施" name="fifth" :lazy="true" style="width: 100%;height: 100%; ">
        <controllPressureDevice :jsonData="getDataFromDom" :imageData="AllImageData" :projectInfo="projectInfo">
        </controllPressureDevice>
      </el-tab-pane>
      <el-tab-pane label="园区内低压管网" name="sixth" :lazy="true" style="width: 100%;height: 100%; ">
        <inLowPressureNet :jsonData="getDataFromDom" :imageData="AllImageData" :projectInfo="projectInfo">
        </inLowPressureNet>
      </el-tab-pane>
      <el-tab-pane label="有限空间场景" name="seventh" :lazy="true" style="width: 100%;height: 100%; ">
        <limitedSpaceScenceVue :jsonData="getDataFromDom" :imageData="AllImageData" :projectInfo="projectInfo">
        </limitedSpaceScenceVue>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import basicInformation from "../../components/StageFillInformation/basicInformation.vue";
import outMidPressureNet from "../../components/StageFillInformation/outMidPressureNet.vue";
import energyMainControllValue from "../../components/StageFillInformation/energyMainControllValue.vue";
import inMidNet from "../../components/StageFillInformation/inMidNet.vue";
import controllPressureDevice from "../../components/StageFillInformation/controllPressureDevice.vue";
import inLowPressureNet from "../../components/StageFillInformation/inLowPressureNet.vue";
import limitedSpaceScenceVue from '../../components/StageFillInformation/limitedSpaceScence.vue';
import { getSurveyApi } from "@/api/project/survey";
///获取已经上传的图片
import { getProjectFileListsApi } from "@/api/project/file";
export default {
  props: ['projectInfo'],
  watch: {
    projectInfo: {

      handler(newData, oldData) {
        this.getData(newData.projectId)
console.log(this.projectInfo,'ssssaaaa')
        ///获取图片信息
        let path = ''

        getProjectFileListsApi(path, this.projectInfo.projectId).then(response => {
          if (response.code == 200) {
            this.AllImageData = response.data
          }
        })
      },

    },
  },
  mounted() {
    if (this.projectInfo.projectId != undefined) {
      getProjectFileListsApi(path, this.projectInfo.projectId).then(response => {
        if (response.code == 200) {
          this.AllImageData = response.data
        }
      })
    }
  },
  data() {
    return {
      isSecond: false,

      activeName: 'first',
      getDataFromDom: {},
      AllImageData: {},
    }
  },
  name: "survergyStage",
  methods: {
    show() {
      this.isSecond = true
    },
    ///获取数据
    getData(id) {
      getSurveyApi(id).then(response => {

        if (response.code == 200) {
          this.getDataFromDom = response.data

        }
      })
    },
    valueDistrubute() {

    }
  },
  components: {
    basicInformation,
    outMidPressureNet,
    energyMainControllValue,
    inMidNet,
    controllPressureDevice,
    inLowPressureNet,
    limitedSpaceScenceVue,
  },
  mounted() {

  }
}

</script>
<style>
.fillContent {
  margin-top: 20px;
  opacity: 1;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #DCDFE6;
  padding: 15px;
  margin-bottom: 15px;
}

.el-tabs__nav-wrap::after {
  height: 1px;
}

.fillContent .el-tabs__nav-wrap {
  margin-top: -14px;
}

.fillContent .el-tabs__item {
  /* color: rgb(144, 147, 153); */
}
 .el-tabs__item .is-active{
color:#409EFF;
}
 .el-tabs__item:hover{
  color: #409EFF;
    cursor: pointer;
} 

.el-tabs__content {
  height: 94%;
}</style>
